<template>
 <!-- <span>
    hello
  </span>-->
  <!--<v-data-table
    :headers="headers"
    :items="desserts"
    class="elevation-1"
  >
    <template slot="items" slot-scope="props">
      <td>{{ props.item.name }}</td>
      <td class="text-xs-right">{{ props.item.calories }}</td>
      <td class="text-xs-right">{{ props.item.fat }}</td>
      <td class="text-xs-right">{{ props.item.carbs }}</td>
      <td class="text-xs-right">{{ props.item.protein }}</td>
      <td class="text-xs-right">{{ props.item.iron }}</td>
    </template>
  </v-data-table>-->
  <div>
    <!--卡片-->
    <v-card>
      <!--卡片的头部-->
    <v-card-title>
    <v-btn color="primary" @click="addBrand">新增品牌</v-btn>
      <!--搜索框search的实现-->
      <!--空间隔离组件 -->
      <v-spacer></v-spacer>
      <!--lable提示文字,v-model绑定模型，可以实现双向绑定，append-icon图标，hide-details把文本框变紧凑-->
      <!--在使用v-model绑定模型以后，需要在模型的data中添加指定的值，key,然后在异步查询中添加数据key-->
      <v-text-field label="输入首字母进行搜索查询" v-model="key" append-icon="search" hide-details></v-text-field>
    </v-card-title>
      <!--分割线-->
      <v-divider></v-divider>
      <!--卡片的中部-->
      <v-data-table
      :headers="headers"
      :items="brands"
      :pagination.sync="pagination"
      :total-items="totalBrands"
      :loading="loading"
      class="elevation-1"a
    >
      <template slot="items" slot-scope="props">
        <td class="text-xs-center">{{ props.item.id }}</td>
        <td class="text-xs-center">{{ props.item.name }}</td>
        <td class="text-xs-center"><img :src="props.item.image"></td>
        <td class="text-xs-center">{{ props.item.letter }}</td>
        <td class="justify-center layout">
          <!--编辑/删除-->
           <v-btn color="info">编辑</v-btn>
           <v-btn color="warning">删除</v-btn>
        </td>
       </template>
      </v-data-table>
    </v-card>
    <!--点击新增后的弹窗对话框-->
   <v-dialog v-model="show" width="500" persistent>
     <v-card>
       <!--对话框的标题-->
       <v-toolbar dense dark color="primary">
         <v-toolbar-title>新增品牌</v-toolbar-title>
         <!--空间隔离组件，分隔线-->
         <v-spacer></v-spacer>
         <!--关闭窗口的按钮-->
         <v-btn @click="closeWindow" icon>
           <v-icon>close</v-icon>
         </v-btn>
       </v-toolbar>
       <!--对话框的内容，表单-->
       <v-card-text class="px-5">
         <!--使用组件MyBrandForm-->
         <!--父子通信,子组件调用父组件里面的方法需要传方法，定义一个方法进行传递，绑定需要执行的方法-->
         <my-brand-form @close="closeWindow"></my-brand-form>
       </v-card-text>

     </v-card>
   </v-dialog>
  </div>
</template>

<script>
   // 引用组件MyBrandForm
  import MyBrandForm from "./MyBrandForm"
    /*export default {
        name: "my-brand"
    }*/
    export default {
     //声明注册组件MyBrandForm
     //局部组件
      components:{
        MyBrandForm
      },
      name: "my-brand",
      data() {
        return {
          search: '', // 搜索过滤字段
          totalBrands: 1, // 总条数
          brands: [], // 当前页品牌数据
          loading: true, // 是否在加载中
          pagination: {}, // 分页信息
          key:'', //根据首字母进行搜索
          show:false,
          headers: [
            {text: 'id', align: 'center', value: 'id'},
            {text: '名称', align: 'center', sortable: false, value: 'name'},
            {text: 'LOGO', align: 'center', sortable: false, value: 'image'},
            {text: '首字母', align: 'center', value: 'letter', sortable: true,},
            {text: '操作', align: 'center', value: 'id', sortable: false}
          ]
        }
      },
      //钩子函数，挂载后执行
      mounted() { // 渲染后执行
        // 查询数据
        this.getDataFromServer();
      },
      methods: {
        getDataFromServer() { // 从服务的加载数的方法。
          //伪造假数据
          /* this.brands = [
            {id:1, name: '小米', image:'../assets/xiaoMi.jpg', letter:'X'},
            {id:2, name: '荣耀', image:'../assets/rongYao.jpg', letter:'R'},
            {id:3, name: '苹果', image:'../assets/icon.jpg', letter:'P'},
          ]*/
          /*  this.$http.get("item/brand/page")
            .then(resp =>{
              console.log(resp)
            }).catch(resp=>{
              console.log("请求失败")
          })*/
          // axios异步查询   ajax请求
          //通过$http，http将axios对象存储到vue对象里面，进行异步查询
          this.$http.get("/item/brand/page", {
            params: {
              // 分页信息的页数
              page: this.pagination.page,
              // 分页信息的列数
              rows: this.pagination.rowsPerPage,
              //分页信息的排序字段
              sortBy:this.pagination.sortBy,
              //分页信息的降序与升序
              desc:this.pagination.descending,
              //首字母搜索
              key:this.key
            }
          })
          //.then为成功后的回调
          /* .then(resp=>{
             console.log(resp)*/
          /* .then(({data})=>{
             console.log(data)*/
            .then(({data}) => {
              // console.log(data);
              //this.brands = data
              //元素的总个数
              this.totalBrands = data.total;
              //当前页要显示的数据
              this.brands = data.items;
              //.catch为失败后的回调
            }).catch(resp => {
            console.log("请求失败")
          })
        },
        //增加品牌的方法
       addBrand(){
          this.show = true;
       },
       //关闭窗口的方法
       closeWindow(){
          this.show = false;
          //需求：商品新增和修改完成后需要做重新查询，并且展示
          //调用重新对服务进行加载的方法
         this.getDataFromServer();
         //优化：只有新增和修改完成后进行重新查询，否则不进行查询

       }
      },
      //watch可以监控data里面自己声明的属性
      watch: {
        //监控pagination对象，当对象以及对象的内容发生改变的时候，重新发起请求查询数据
        pagination:{
           //监控pagination内部的属性
           deep:true,
           //处理器
           handler(){
             this.getDataFromServer();
           }
         },
        //使用watch监控属性的变化，key是属性，不用写对象
        //当监控到key发生变化的时候，重新发起请求，对服务重新加载
        key(){
          this.getDataFromServer();
        }
      }
    }
       </script>
    <style scoped>

  </style>
